<script setup>

</script>

<template>
    <div>
        <h3>个人信息页面，包含头像的更新</h3>
        <div>
            
            <!-- 使用字符串语法（推荐） -->
            <FontAwesomeIcon :icon="['fas', 'user']" class="text-primary text-3xl"/>
            <FontAwesomeIcon :icon="['fab', 'github']" class="text-secondary text-3xl"/>

            <!-- 动态图标 -->
            <FontAwesomeIcon :icon="['fas', true ? 'chevron-down' : 'chevron-right']" />
        
            <!-- 带样式的图标 -->
            <FontAwesomeIcon 
            :icon="['fas', 'search']" 
            style="font-size: 28px;"
            />
        </div>

        <div class="card bg-dark text-white transform transition hover:-translate-y-1 hover:shadow-lg">
            <h2 class="text-xl font-semibold mb-3">深色卡片</h2>
            <p class="mb-4">深色主题的卡片组件</p>
            <button class="btn btn-warning">警告按钮</button>
        </div>

        <div class="p-6">
            <h1 class="text-3xl font-bold text-primary mb-4">
            Tailwind CSS 测试
            </h1>
            
            <div class="flex gap-4 mb-6">
                <div class="p-4 bg-primary text-white rounded-lg">
                    主色块
                </div>
                <div class="p-4 bg-secondary text-white rounded-lg">
                    辅助色块
                </div>
                <div class="p-4 bg-danger text-white rounded-lg">
                    危险色块
                </div>
            </div>
            
            <button class="btn bg-primary text-white hover:bg-blue-600">
            测试按钮
            </button>
            <el-button class="p-4 btn bg-primary text-white hover:bg-blue-600">elelment plus button</el-button>
            
            <div class="mt-6 p-4 bg-gray-100 rounded-lg font-sans">
                <p class="text-gray-700">
                    如果看到蓝色标题、彩色方块和带悬停效果的按钮，表示 Tailwind CSS 已正确配置
                </p>
            </div>


            <el-button type="primary">
                <template #icon>
                    <FontAwesomeIcon :icon="['fas', 'search']" />
                </template>
                搜索
            </el-button>

            <el-input placeholder="请输入邮箱">
                <template #append>
                    <FontAwesomeIcon :icon="['fas', 'envelope']" class="text-gray-400" />
                </template>
            </el-input>

            <el-menu>
                <el-menu-item index="1">
                <template #title>
                    <span>仪表盘</span>
                </template>
                <template #default>
                    <FontAwesomeIcon :icon="['fab', 'google-pay']"  class="text-3xl"/>
                </template>
                </el-menu-item>
            </el-menu>

    </div>
    <h3><font-awesome-icon :icon="['fab', 'google']"/></h3>
    
</div>
</template>

<style scoped>

</style>